<template>
  <div class="goods-list-item" @click="goodsItemClick">
    <img class="goods-list-item-img" v-lazy="showImage" :alt="goodsItem.title" @load="imgLoaded">
    <div class="goodsInfo">
      <p class="goodsInfo-title">{{goodsItem.title}}</p>
      价格：<span class="price">{{goodsItem.price}}</span>&nbsp;&nbsp;&nbsp;&nbsp;收藏：<span class="collect">{{goodsItem.cfav}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GoodsListItem",
    inject: ['reload'],
    props: {
      goodsItem: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      showImage() {
        return this.goodsItem.image || this.goodsItem.show.img;
      },
      showId() {
        return this.goodsItem.iid || this.goodsItem.item_id;
      }
    }, methods:
      {
        imgLoaded() {
          if (this.$route.path.indexOf('/home') !== -1) {
            this.$bus.$emit("homeimgLoaded")
          } else if (this.$route.path.indexOf('/detail') !== -1) {
            this.$bus.$emit("detailimgLoaded")
          }
          //往事件总线发射一个图片加载完毕的事件
        }
        ,
        goodsItemClick() {
          console.log(this.showId);
          if (this.$route.path !== "/detail/" + this.showId) {
            this.$router.push("/detail/" + this.showId);
            //进行页面的刷新 如果不刷新 在详情页里面点击推荐的商品时将没有反应
            this.reload();
          }
        }
        ,
      }
    ,
    beforeDestroy() {
      //在组件销毁之前把图片加载完毕的事件注销
      this.$bus.$off("imgLoaded")
    }
  }
</script>

<style scoped>
  .goods-list-item {
    margin-bottom: 10px;
    /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
    break-inside: avoid;
    background: #fff;
    font-size: 10px;
    text-align: center;
  }

  .goods-list-item-img {
    width: 100%;
    vertical-align: middle;
  }

  .goodsInfo {
    vertical-align: middle;
    width: 100%;
    overflow: hidden;
    line-height: 20px;
  }

  .goodsInfo-title {
    margin-left: 5px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .price, .collect {
    color: var(--color-high-text);
  }

</style>
